<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="swiper-bundle.min.css">
    <style>
        .swiper{
            height:300px;
            width:600px;
            background-color: aqua;
        }
        img{
            height:300px;
            width:600px;
        }
        /* .swiper{
            --swiper-theme-color: red;
            --swiper-pagination-color: pink;
        } */

       .swiper-pagination-bullet-active{
            background-color:chartreuse !important;
       }
    </style>
</head>
<body>
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/3.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script src="swiper-bundle.min.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper', {
          effect: 'fade',//淡入淡出
          loop: true, // 循环模式选项 无限循环模式
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },

          autoplay: {
            delay: 1000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
         },
          
        })        
        </script>
</body>
</html>